<template>
	<view class="violations">
		<view class="pageHead">
			<view class="headStatus" :style="{height: sysHeight}"></view>
			<view class="headNav">
				<view class="iconfont icon-fanhui2" @tap="returns"></view>
				<view class="headTitle">
					<!-- 违章代缴 -->
					قاتناش جەرىمانىسى
				</view>
			</view>
		</view>
		<view class="card">
			<view class="cardTitle">
				تەكشۈرۈش نەتىجىسى
			</view>
			<view class="cardItem" v-for="(item, index) in listArr">
				<view class="itemLabel">
					{{item.label}}
				</view>
				<view class="itemVal">
					{{item.value}}
				</view>
			</view>
		</view>
		<view class="subBtn" @click="sbmit">
			دەرھال تۈلەش 
			{{total_price}}
		</view>
	</view>
</template>

<script>
	import { violationQuery, violationOrder, violationPayCancel, violationPayAgain } from '@/api/dailyLife.js'
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	export default {
		data() {
			return {
				sysHeight: sysHeight,
				listArr: [
					{
						label: 'ئىسىم فامىلىسى',
						value: ''
					},
					{
						label: 'جەرىمانە سوممىسى',
						value: ''
					},
					{
						label: 'قۇشۇمچە جەرىمانە',
						value: ''
					},
					{
						label: 'مۇلازىمەت ھەققى',
						value: ''
					},
					{
						label: 'ماشىنا تىپى',
						value: ''
					}
				],
				violationsVal: '' ,// 违章单号
				violationsInfo: [], // 违章信息
				queryId: '', // 查询ID
				price: 0, // 支付金额
				fee: 0,
				orderId: '', // 上次支付用的订单id
				orderNo: '' ,// 上次支付用的订单编号
				total_price: 0,
			};
		},
		
		methods: {
			// 后退
			returns() {
				return uni.navigateBack({
					delta: 1,
				})
			},
			// 提交
			async sbmit() {
				let that = this;
				try{
					uni.showLoading({
						title: 'تۈلىنۋاتىدۇ'
					});
					let params = {
						fineNum: this.violationsVal,
						money: this.price,
						userName: this.violationsInfo[0].dsr,
						queryId: this.queryId,
					}
					let resData = await violationOrder(params);
					that.payFn(resData);
				}catch(e){
					console.log(e);
					uni.hideLoading();
				}
				
			},
			// 支付fn
			payFn(resData) {
				let that = this;
				const jsConfig = resData.data.jsConfig;
				const orderInfo = resData.data.order;
				uni.requestPayment({
					timeStamp: jsConfig.timeStamp,
					nonceStr: jsConfig.nonceStr,
					package: jsConfig.package,
					signType: jsConfig.signType,
					paySign: jsConfig.paySign,
					success: function(res) {
						uni.hideLoading();
						uni.redirectTo({
							url: `/pages/dailyLife/rechargeResult/index?orderId=${orderInfo.orderId}&orderNo=${orderInfo.orderNo}&pageType=3`
						})
					},
					fail: function(e) {
						uni.hideLoading();
						if (e.errMsg == 'requestPayment:fail cancel') {
							that.orderId = orderInfo.orderId;
							that.orderNo = orderInfo.orderNo;
							uni.showModal({
								title: that.$i18n['提示'],
								content: that.$i18n['是否取消支付？'],
								cancelText: that.$i18n['确认'],
								confirmText: that.$i18n['取消'],
								success: function (res) {
									if (res.confirm) {
										that.againPay()
									} else if (res.cancel) {
										that.cancelPay()
									}
								}
							});
							return;
						}
					},
				})
			},
			
			// 取消支付
			async cancelPay() {
				uni.showLoading({
					title: ''
				});
				let params = {
					orderId: this.orderId,
					orderNo: this.orderNo
				}
				try{
					const resData = await violationPayCancel(params);
					this.$util.Tips({
						title: resData.msg
					})
					uni.hideLoading();
				}catch(e){
					uni.hideLoading();
				}
			},
			
			// 重新支付
			async againPay() {
				uni.showLoading({
					title: 'تۈلىنۋاتىدۇ'
				});
				let params = {
					orderId: this.orderId,
					orderNo: this.orderNo
				}
				try{
					const resData = await violationPayAgain(params);
					this.payFn(resData);
				}catch(e){
					uni.hideLoading();
				}
			},
		},
		
		async onLoad(option) {
			this.violationsVal = option.number;
			try{
				let resData;
				if (option.resData) {
					resData = JSON.parse(option.resData);
				} else {
					resData = await violationQuery({
						fineNum: option.number
					});
				}
				let useData = resData.data.content
				this.violationsInfo = useData;
				this.listArr = [
					{
						label: 'ئىسىم فامىلىسى',
						value: useData[0].dsr
					},
					{
						label: 'جەرىمانە سوممىسى',
						value: useData[0].fkje
					},
					{
						label: 'قۇشۇمچە جەرىمانە',
						value: useData[0].znj
					},
					{
						label: 'مۇلازىمەت ھەققى',
						value: resData.data.fee
					},
					{
						label: 'ماشىنا تىپى',
						value: useData[0].hpzlStr
					},
				]
				this.queryId = resData.data.queryId; // 查询ID
				this.fee = resData.data.fee; // 服务费
				this.price = resData.data.content[0].fkje + resData.data.content[0].znj; // 金额
				this.total_price = resData.data.money; // 总金额
			}catch(e){
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
	.violations {
		width: 750rpx;
		min-height: 100vh;
		background: linear-gradient(180deg, #FDD048 0%, #FAF6ED 516rpx, #F9F9F9 100%);
		.pageHead {
			position: flex;
			.headStatus {
				width: 100%;
			}
			.headNav {
				display: flex;
				height: 43px;
				line-height: 43px;
				text-align: center;
				font-size: 36rpx;
				color: #333;
				.icon-fanhui2 {
					position: absolute;
					left: 40rpx;
				}
				.headTitle {
					width: 100%;
					height: 43px;
					line-height: 43px;
					width: 100%;
					text-align: center;
					font-weight: bold;
				}
			}
		}
		.card {
			width: 690rpx;
			height: 604rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin: 40rpx auto 0;
			border-radius: 32rpx;
			padding: 30rpx;
			.cardTitle {
				margin-top: 10rpx;
				margin-bottom: 22rpx;
				height: 42rpx;
				line-height: 42rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: #333333;
			}
			.cardItem {
				line-height: 98rpx;
				display: flex;
				border-bottom: 1px solid #F1F1F1;
				.itemLabel {
					width: 230rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
				.itemVal {
					font-size: 28rpx;
					font-weight: 400;
					color: #333333;
					flex: 1;
					margin-left: 42rpx;
				}
			}
		}
		.subBtn {
			width: 670rpx;
			height: 108rpx;
			line-height: 108rpx;
			text-align: center;
			background: linear-gradient(178deg, #FFCE53 0%, #FDD04A 100%);
			border-radius: 50rpx;
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			position: fixed;
			bottom: 94rpx;
			left: 40rpx;
		}
	} 
</style>
